<!DOCTYPE html>
<html>
	<head>
	  	<meta charset="utf-8">
	  	<title></title>
	  	<meta name="renderer" content="webkit">
	  	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	  	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	  	<link rel="stylesheet" href="/usercp/layui/css/layui.css" media="all">
  		<link rel="stylesheet" href="/usercp/style/admin.css" media="all">
	</head>
	<body>
		<div class="m-site">
			<div class="m-site-body">
				<!-- 站点配置 -->
				<div class="m-site-leftbar">
					<!-- 站点选择 -->
					<div class="layui-form">
						<div class="layui-inline" style="width: 148px;">
						    <select name="interest" lay-filter="site" lay-search>
							</select>
						</div>
						<div class="layui-inline">
							<button class="layui-btn" id="manage" data-url="/usercp/site/lists">管理</button>
						</div>
					</div>
					<ul id="nav">
						<li data-url="/usercp/site/setting" class="current">站点配置</li>
						<li data-url="/usercp/site/template">模板中心</li>
						<li data-url="/usercp/article/index">资讯管理</li>
						<li data-url="/usercp/comment/index">评论管理</li>
						<li data-url="/usercp/goods/index">产品管理</li>
						<li data-url="/usercp/instance/index">案例管理</li>
						<li data-url="/usercp/banner/index">导航管理</li>
					</ul>
				</div>
				<div class="m-site-content">
					<iframe id="iframe" src="" frameborder="0" class="m-site-frame"></iframe>
				</div>
			</div>
		</div>
		<style>
			html, body, .m-site, .m-site-box {
				height: 100%;
			}
			.m-site {
				padding: 15px;
				box-sizing: border-box;
			}
			.m-site-body {
				position: relative;
				background-color: #fff;
				box-sizing: border-box;
			}
			.m-site .m-site-header {
				position: absolute;
				top: 0;
				left: 0;
				padding: 10px 15px;
				width: 100%;
				border-bottom: 1px solid #e6e6e6;
				box-sizing: border-box;
			}
			.m-site .m-site-body {
				position: relative;
				padding-left: 220px;
				height: 100%;
				box-sizing: border-box;
			}
			.m-site .m-site-leftbar {
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				padding: 10px;
				width: 200px;
				border-right: 1px solid #e6e6e6;
				overflow: hidden;
				overflow-y: auto;
			}
			.m-site .m-site-leftbar .layui-form {
				padding-bottom: 10px;
			}
			.m-site .m-site-leftbar .layui-form-select .layui-input {
				height: 28px;
				line-height: 28px;
			}
			.m-site .m-site-leftbar .layui-btn {
				padding: 0 10px;
				height: 28px;
				line-height: 28px;
			}
			.m-site .m-site-leftbar ul {
				margin-top: 10px;
			}
			.m-site .m-site-leftbar ul li {
				padding: 10px 20px;
				color: #666;
				border-bottom: 1px solid #e6e6e6;
				background-color: #fff;
				cursor: pointer;
			}
			.m-site .m-site-leftbar ul li.current {
				color: #333;
				background-color: #e6e6e6;
			}
			.m-site .m-site-leftbar ul li.disabled {
				color: #ccc;
			}
			.m-site .m-site-content {
				height: 100%;
			}
			.m-site .m-site-frame {
				width: 100%;
				height: 100%;
			}
		</style>
		<script src="/usercp/layui/layui.js"></script>
		<script>
		layui.use(['form', 'table'], function(){
		  	var form = layui.form;
		  	var $ = layui.$
		  	// 站点选择
		  	form.on('select(site)', function(data){
				var urls = $("#nav").find('li');
	            $.each(urls,function(i,item){
	            	url = $(item).data('url') + '?site_id=' + data.value;
	            	$(item).attr('data-url',url);
	            	url = $('#nav').find('.current').attr('data-url');
            		var arrUrl = url.split("?");
					var para = arrUrl[0];
					url = para + '?site_id=' + data.value;
					$('#iframe').attr('src',url)
	            	
	            })
			});
			//获取导航
			/*$.get('/usercp/site/nodes', {}, function (data) {
                var $html = "";
                if(data.data != null){
                    $.each(data.data, function (index, item) {
                    	if(index == 0){
                    		$html += '<li data-url="'+ item.path +'" class="current">'+ item.title +'</li>';
                    	}else{
                    		$html += '<li data-url="'+ item.path +'">'+ item.title +'</li>';
                    	}
                    });
                    var nav = document.getElementById('nav');
		            $(nav).append($html);
		            //append后必须从新渲染
		        }
		    })*/
			// 导航对象
		  	function setNavCalssname() {
		  		var $lis = $('#nav li');
		  		for(var k in $lis) {
	  				if($lis[k].className != 'disabled'){
	  					$lis[k].className = '';
	  				}
	  			}
		  	}
		  	
			// 站点管理
			$('#manage').on('click', function() {
				var url = this.getAttribute('data-url');
				if(document.getElementById("iframe").getAttribute('src') == url) return;
				document.getElementById("iframe").src = url;
				// classname变更
	  			setNavCalssname();
			})

			// 导航切换
			$('#nav').on('click', 'li', function() {
				var url = this.getAttribute('data-url');
	  			// 如果没有地址，阻止下一步操作
	  			if(!url || this.className == 'disabled') return;
	  			// 如果iframe当前地址相等，阻止下一步操作
	  			if(document.getElementById("iframe").getAttribute('src') == url) return;
	  			// classname变更
	  			setNavCalssname();
	  			this.className = 'current';
	  			// iframe地址变更
	  			document.getElementById("iframe").src = url;
			})
		  	
		  	//动态加载站点列表
		  	$.get('/usercp/site/lists', {}, function (data) {
                var $html = "";
                if(data.data != null){
                    $.each(data.data, function (index, item) {
                    	$html += "<option value='" + item.id + "'>" + item.name + "</option>";
                    });
		            $("select[name='interest']").append($html);
		            //append后必须从新渲染
		            form.render('select');
		            var siteval = $("select[name='interest']").val();
		            var urls = $("#nav").find('li');
		            $.each(urls,function(i,item){
		            	url = $(item).data('url') + '?site_id=' + siteval;
		            	$(item).attr('data-url',url);
		            	if(i == 0){
		            		$('#iframe').attr('src',url)
		            	}
		            })
		         }
		    })
		  	
		});
		</script>
	</body>
</html>
